<template>
	<view class="msj_zhuce">
		<view class="msj_zhuce_author">
			<view class="msj_upload_author" @click="oksucces">
				<image style="width: 100%; height: 100%;" v-if="form.imageUrl" :src="form.imageUrl" mode=""></image>
				<u-icon v-else name="photo-fill" size='20'></u-icon>
				<text v-show="!form.imageUrl" style="font-size: 12px;" >选择头像</text>
			</view>
		</view>
		<u-form :model="form" ref="uForm">
			<u-form-item label="账号" prop="name">
				<u-input v-model="form.name" minlength='11' maxlength='11' @change='nameskeyup' placeholder='请输入手机号' />
			</u-form-item>
			<u-form-item label="密码" prop="pass">
				<u-input v-model="form.pass" @change='passkeyup' :password-icon="true" type='password'
					placeholder='请输入密码' />
			</u-form-item>
			<u-form-item label="昵称" prop="username">
				<u-input v-model="form.username" @change='usernamekeyup' placeholder='请输入昵称' />
			</u-form-item>
			<u-form-item label="简介" prop="jianjie">
				<u-input v-model="form.jianjie" minlength='5' @change='jianjiekeyup' :password-icon="true"
					type='textarea' placeholder='请输入简介' />
			</u-form-item>
		</u-form>
		<view class="msj_zhuce_btn">
			<u-button type="success" @click="submit">注册</u-button>
		</view>
	</view>
</template>

<script>
	import {getmsjuser,addmsjuser,addmsjusermy} from '../../utils/api.js'
	export default {
		data() {
			return {
				action: 'http://127.0.0.1:7001/upload',
				form: {
					name: '',
					pass: '',
					username: '',
					jianjie: '',
					imageUrl:''
				},
				users:[],
				fileList: [],
				rules: {
					name: [{
						min: 11,
						max: 11,
						required: true,
						message: '请输入手机号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					pass: [{
						message: '请输入密码',
						trigger: ['change', 'blur']
					}],
					username: [{
						message: '请输入昵称',
						trigger: ['change', 'blur']
					}],
					jinajie: [{
						min: 5,
						message: '简介不能少于5个字',
						trigger: 'change'
					}]
				}
			}
		},
		onShow(){
			getmsjuser().then(res=>{
					this.users=res.data
					console.log(this.users);
			})
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			nameskeyup(val) {
				this.form.name = val.replace(/\D/g, '')
				if (!this.form.name) {
					this.showToast('账号格式不对')
				}
			},
			passkeyup(val) {
				this.form.pass = val.replace(/\s+/g, '')
			},
			usernamekeyup(val) {
				this.form.username = val.replace(/\s+/g, '')
			},
			jianjiekeyup(val) {
				this.form.jianjie = val.replace(/\s+/g, '')
			},
			showToast(val) {
				uni.showToast({
					icon: 'error',
					title: val,
					duration: 2000
				});
			},
			submit() {
				console.log(this.form);
				if((this.form.name&&this.form.name.length==11)&&this.form.pass&&this.form.username&&(this.form.jianjie&&this.form.jianjie.length>=5)&&this.form.imageUrl){
					let flag=this.users.find(v=>v.phone==this.form.name)
					if(flag){
						this.showToast('手机号已被注册')
					}else{
						let obj={
							name:this.form.username,
							phone:this.form.name,
							password:this.form.pass,
							jianjie:this.form.jianjie,
							author:this.form.imageUrl
						}
						let userinfo={
							username:obj.name,
							author:obj.author,
							guanzhu:'[]',
							fensi:'[]',
							shouc:'[]',
							dianz:'[]',
							zuopin:'[]',
							jinajie:obj.jianjie
						}
						// console.log(userinfo);
						// console.log(obj);
						addmsjuser(obj).then(res=>{
							addmsjusermy(userinfo).then(res=>{
								console.log(res);
							})
							uni.showToast({
								icon: 'success',
								title: '注册成功',
								duration: 2000,
								success:()=>{
									uni.navigateBack()
								}
							});
						})
						
					}
				}else{
					this.showToast('请填写完整!')
				}
			},

			oksucces(){
				uni.chooseImage({
				    count: 1, //选择图片的数量，默认9
				    sizeType: ['compressed'], //原图、压缩图或者两者都有，可以指定原图或压缩图，默认两者都有
				    sourceType: ['album'], //从相册选择
				    success: (res)=> {
				// 返回选定照片的本地文件路径列表
						this.form.imageUrl=res.tempFilePaths[0]
						let data=res.tempFiles[0]
						uni.uploadFile({
						                    url: 'http://127.0.0.1:7001/upload',
						                    filePath: this.form.imageUrl,
						                    name: 'file',
											formData: { user: 'test'},
						                    // header: {'content-type': 'multipart/form-data'},
						                    success: (res)=> {
						                        let file=JSON.parse(res.data).data.replaceAll('\\','/')
												this.form.imageUrl=`http://127.0.0.1:7001${file}`
		
						                    }
						                });
				    }
				})
			}

		}
	}
</script>

<style>
	.msj_zhuce {
		width: 100%;
		padding: 20px 0 0;
	}

	.msj_zhuce_author {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.u-form-item {
		box-sizing: border-box;
		padding: 0 15px;
	}

	.u-upload {
		align-items: center;
	}

	.msj_upload_author {
		width: 80px;
		height: 80px;
		background: #F4F5F7;
		display: flex; flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.msj_zhuce_btn {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		padding: 20px;
	}
</style>